<template>
  <!-- IndexBar 索引栏 -->
  <div class="index-bar">
    <van-index-bar :index-list="[]">
      <div v-for="(data, index) in List.manageCities" :key="'indexAnchor'+index">
        <van-index-anchor
        :index="data.index"
        :style="{
        width: '100vw',
        backgroundColor: '#fff'}">
        <p :style="{borderRadius: '.1rem',
          paddingLeft: '.16rem',backgroundColor: 'rgba(223, 212, 172, .2)'}">{{data.index}}</p>
        </van-index-anchor>
      <van-cell v-for="(item, i) in data.list"
      :key="'indexCell'+i" :title="item.name"
      @click="selectCity(item)" />
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import BetterScroll from 'better-scroll'
import { mapMutations, mapActions, mapState } from 'vuex'
import Vue from 'vue'
import { IndexBar, IndexAnchor, Toast } from 'vant'
Vue.use(IndexBar).use(IndexAnchor).use(Toast)

export default {
  data () {
    return {
      scrollHeight: []
    }
  },
  computed: {
    ...mapState('cityModule', ['cities']),
    List () {
      const letterArr = [] // 26个字母
      for (let i = 65; i < 91; i++) {
        letterArr.push(String.fromCharCode(i))
      }
      // filter遍历26个字母,跟原始城市列表数据.pinyin.首字母.大写
      const manageCities = []
      const indexBarList = []
      for (let j = 0; j < letterArr.length; j++) {
        // 得到每个字母的所有城市
        const temparr = this.cities.filter(item => item.pinyin.substring(0, 1).toUpperCase() === letterArr[j])
        // 收集每个字母对应的城市数据
        temparr.length && manageCities.push({ // 存在才push
          index: letterArr[j], // 字母
          list: temparr // 字母对应的城市
        })
        // 收集右边的数据,存在的字母的城市
        temparr.length && indexBarList.push(letterArr[j])
      }
      return { manageCities, indexBarList }
    }
  },
  methods: {
    ...mapActions('cityModule', ['getCitiesAction']),
    ...mapMutations('cityModule', ['SETCITYNAME', 'SETPOSTCODES', 'SETCITYID']),
    selectCity (obj) {
      this.SETCITYNAME(obj.name)
      this.SETPOSTCODES(obj.cityId)
      this.SETCITYID(obj.id)
      this.$router.push({ name: 'Home' })
    }
  },
  beforeMount () {
    if (this.cities.length === 0) {
      // 城市列表
      Toast.loading({
        message: '定位中...',
        forbidClick: true,
        loadingType: 'spinner',
        duration: 0
      })
      this.getCitiesAction().then(() => {
        Toast.clear()
      })
    } else {
      // console.log('使用缓存')
    }
  },
  mounted () {
    this.scrollHeight = this.List
    // 初始化betterscroll
    this.$nextTick(() => {
      const cityScroll = new BetterScroll('.index-bar', {
        scrollbar: {
          fade: true,
          interactive: false // 1.8.0新增 表示滚动条是否可以交互
        },
        pullUpLoad: {
          threshold: 0
        },
        click: true // 支持click事件
      })
      cityScroll.on('pullingUp', () => {
        Toast({
          message: '到底了~~~',
          duration: 0,
          position: 'bottom'
        })
        setTimeout(() => {
          cityScroll.finishPullUp() // 自动调用 .refresh()
          Toast.clear()
        }, 1500)
      })
    })
  }
}
</script>

<style lang="scss" scoped>
.index-bar{
  position: relative;
  top: 0;
  overflow: hidden;
  height: 9rem;
  text-align: left;
}
</style>
